<template>
	<view>
		<view class="banner-box">
			<!-- <image :src="treeObj.icon" mode="widthFix"></image> -->
			<u-lazy-load :image="treeObj.icon"></u-lazy-load>
		</view>
		<view class="list-box">
			<view class="list-box-title">
				章节<text>共{{treeObj.chapters ? treeObj.chapters.length : 0}}章</text>
			</view>
			<view class="list-content">
				<u-collapse>
					<u-collapse-item :title="item.name" v-for="(item, index) in treeObj.chapters" :key="index">
						<view v-for="(itemlist, indexlist) in item.courses" :key="indexlist" class="er-ji" @click="detailRouter(itemlist)">
							{{itemlist.name}}<text v-if="itemlist.learned && !score">(已学习)</text><text class="lianxi" v-if="score">去练习</text>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from '../../api/index.js'
	import {booksTree,courseTree} from '../../api/api.js'
	export default {
		data() {
			return {
				itemList: [],
				treeObj: {},
				score: false,
				itemObj:{}
			}
		},
		onLoad(query) {
			this.itemObj = JSON.parse(query.item)
			if(query.lianxi){
				this.score = true
			}
		},
		onShow() {
			this.getBooksTree()
		},
		methods: {
			getBooksTree(){
				let itemObj = this.itemObj
				uni.setNavigationBarTitle({
				    title:itemObj.title
				})
				itemObj.chapters.forEach(e=>{
					e.courses.forEach(b=>{
						if(b.id == uni.getStorageSync('learnedId')){
							b.learned = true
						}
					})
				})
				this.treeObj = itemObj
				this.itemList = itemObj
				uni.setStorageSync('learnedId', '')
				// booksTree({professionId:professionId,showOptionalCourse:showOptionalCourse}).then(resp=>{
				// 	resp.forEach(e=>{
				// 		if(e.id == id){
				// 			e.icon = baseUrl + e.icon
				// 			this.treeObj = e
				// 			e.chapters.forEach(b=>{
				// 				b.head = b.name
				// 				b.open = true
				// 				b.list = b.courses
				// 			})
				// 			this.itemList = e.chapters
				// 		}
				// 	})
				// })
			},
			detailRouter(item){
				if(this.score){
					uni.navigateTo({
						url:`../choose/choose?score=${this.score}&id=${item.id}`
					})
				}else{
					uni.navigateTo({
						url:`../detail/detail?title=${item.name}&id=${item.id}`
					})
				}
			},
			getCourseTree(id){
				courseTree({examPlanId:id}).then(resp=>{
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.list-box{
	padding: 10rpx 40rpx;
	color: #000;
	.list-box-title{
		height: 80rpx;
		line-height: 80rpx;
		overflow: hidden;
		font-size: 38rpx;
		text{
			line-height: 120rpx;
			padding-left: 20rpx;
			font-size: 30rpx;
			color: #C0C0C0;
		}
	}
	.list-content{
		.er-ji{
			height: 60rpx;
			line-height: 60rpx;
			color: #000;
			font-size: 34rpx;
			padding-left: 30rpx;
			overflow: hidden;
			text{
				color: #F18B3A;
				padding-left: 20rpx;
			}
			.lianxi{
				color: #000 !important;
				font-size: 24rpx;
				border: solid 2rpx #000;
				padding: 5rpx 10rpx;
				border-radius: 15rpx;
				display: inline-block;
				height: 40rpx;
				line-height: 30rpx;
				margin-top: 10rpx;
				float: right;
			}
		}
	}
}
</style>
